export function useCanvasWaterMack({
  container = document.body,
  width = "200px",
  height = "150px",
  textAlign = "center", //"center" | "end" | "left" | "right" | "start"
  textBaseline = "middle", //"alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top"
  font = "20px microsoft yahei",
  fillStyle = "rgba(184, 184, 184, 0.1)",
  content = "canvas请勿外传",
  rotate = 30,
  zIndex = 1000,
} = {}) {
  const canvas: HTMLCanvasElement = document.createElement("canvas");
  canvas.setAttribute("width", width);
  canvas.setAttribute("height", height);
  const ctx = canvas.getContext("2d");
  ctx.textAlign = <CanvasTextAlign>textAlign;
  ctx.textBaseline = <CanvasTextBaseline>textBaseline;
  ctx.font = font;
  ctx.fillStyle = fillStyle;
  ctx.rotate((Math.PI / 180) * rotate);
  ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

  const base64Url = canvas.toDataURL();
  const watermarkDiv = document.createElement("div");
  watermarkDiv.setAttribute(
    "style",
    `
         position:absolute;
         top:0;
         left:0;
         width:100%;
         height:100%;
         z-index:${zIndex};
         pointer-events:none;
         background-repeat:repeat;
         background-image:url('${base64Url}')`
  );

  container.style.position = "relative";
  container.insertBefore(watermarkDiv, container.firstChild);
}

export function useSvgWaterMack({
  container = document.body,
  content = "svg请勿外传",
  width = "300px",
  height = "200px",
  opacity = "0.1",
  fontSize = "20px",
  zIndex = 1000,
} = {}) {
  const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
  <text x="50%" y="50%" dy="12px"
    text-anchor="middle"
    stroke="#a0a0a0"
    stroke-width="1"
    stroke-opacity="${opacity}"
    fill="none"
    transform="rotate(-45, 120 120)"
    style="font-size: ${fontSize};">
    ${content}
  </text>
</svg>`;
  const base64Url = `data:image/svg+xml;base64,${window.btoa(
    unescape(encodeURIComponent(svgStr))
  )}`;
  const __wm = document.querySelector(".__wm");
  const watermarkDiv = __wm || document.createElement("div");
  watermarkDiv.setAttribute(
    "style",
    `
         position:absolute;
         top:0;
         left:0;
         width:100%;
         height:100%;
         z-index:${zIndex};
         pointer-events:none;
         background-repeat:repeat;
         background-image:url('${base64Url}')`
  );

  container.style.position = "relative";
  container.insertBefore(watermarkDiv, container.firstChild);
}
